Echarts柱状图使用最小高度解决数据差距过大，且过滤数据为0的情况

2024-03-30 08:25| 来源: 网络整理| 查看: 265

1.问题描述：柱状图两条数据差距过大时，数据小的那一条会难以显示，甚至消失，如下图：

数据是1，但和上面的800比实在太小，肉眼已经看不到了。

解决方法：series中添加最小高度（barMinHeight），添加最小高度为5（barMinHeight:5,），上述问题解决。

但是，新问题出现了，数据为0也会显示最小高度，如下图：

2.问题描述plus：要求有最小高度，且过滤数据为0的情况。

解决思路：使用函数判断数据，过滤数据0，要知道，echarts里的每个属性都可以写函数的，在最小高度barMinHeight里写个函数是可以的。

//最小高度中写自定义函数 barMinHeight: (function(data){ //判断数据是否为0 if (data.value == 0) { //是0则不设置高度，否则设置最小高度5 return 0; } else { return 5; } })(),

想法是好的，可惜，function的data是没有定义的，也就是说，这个函数会报错，需要进一步加工，使用全局变量传值进函数中。修改后的函数如下：

//这里的optionData是全局变量 barMinHeight: (function (optionData) { //观察数据格式 console.log(optionData); //使用for循环遍历数组 for(var i=0;i { if (v == 0) optionData[index] =null; });

如果想要柱形图显示0数据，那么在tooltip中还得还原成数据0。

附全部代码：

Document var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; var optionData= [0, 1, 800,0]; optionData.forEach((v,index) => { if (v == 0) optionData[index] =null; }); console.log(optionData); option = { tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter:function(params) { } }, xAxis: { type: 'value', }, yAxis: { type: 'category', data: ['q', 'w','e','r'] }, series: { data:optionData, name: 'test', type: 'bar', stack: 'total', barMaxWidth: 50, barMinHeight:5, } }; myChart.setOption(option);

【本文地址】

公司简介

联系我们